<!-- 商品规格信息弹出框 -->
<template>
	<view class="container">
		<view class="goods-content">
			<image :src="imgUrl" class="goods-image" @click="clickImg"></image>

			<view class="goods-info">
				<view class="">
					{{ popupGoods.name }}
				</view>
				<view class="order-price">
					¥
					<text style="font-size: 40rpx">{{ orderPrice.toFixed(2) }}</text>
				</view>
				<view class="order-spec">
					{{ orderSpec }}
				</view>

				<view class="order-stock-num">库存：{{ orderStockNum }}</view>
			</view>
		</view>

		<view class="goods-spec">
			<view style="font-size: 30rpx; padding-top: 20rpx">{{ specType }}</view>
			<view class="spec-list">
				<button class="spec-item" :class="index == specActive ? 'spec-selected' : ''" v-for="(item, index) in specNameList" @tap="selectSpec(index)" :key="index">
					{{ item }}
				</button>
			</view>
		</view>
		<view class="goods-spec">
			<view style="font-size: 30rpx; padding-top: 20rpx">款式</view>
			<view class="spec-list">
				<button class="spec-item" :class="index == styleActive ? 'spec-selected' : ''" v-for="(item, index) in styleList" @tap="selectStyle(index)" :key="index">
					{{ item.styleName }}
				</button>
			</view>
		</view>
		<view class="purchase-num">
			<view>购买数量</view>
			<Counter ref="childCounter"></Counter>
		</view>

		<view class="purchase-tool">
			<view class="common add-cart" @tap="addCart">
				<text>加入购物车</text>
			</view>
			<view class="common buy" @tap="takeOrder">
				<text>立即下单</text>
			</view>
		</view>
	</view>
</template>

<script>
import { listGoodsStock, checkCart } from '@/api/goods';
import Counter from '@/components/counter.vue';
export default {
	components: {
		Counter
	},
	props: {
		popupGoods: {
			type: Object,
			required: false,
			default: {}
		},
		specType: {
			type: String,
			required: false,
			default: ''
		},
		specNameList: {
			type: Array,
			required: false,
			default: []
		},
		goodsDetailList: {
			type: Array,
			required: false,
			default: []
		},
		goodsStockList: {
			type: Array,
			required: false,
			default: []
		},
		styleList:{
			type: Array,
			required: false,
			default: []
		}
	},
	watch: {
		popupGoods(newVal, oldVal) {
			this.specActive = 0;
			this.imgUrl = newVal.thumbnail;
		},
		styleList(newVal, oldVal){
			if(newVal.length > 0 ){
				this.imgUrl = newVal[0].imgUrl;
			}
		}
	},
	computed: {
		orderPrice() {
			return this.goodsDetailList.length == 0 ? 0 : this.goodsDetailList[this.specActive].goodsPrice;
		},
		// commission() {
		// 	return this.goodsDetailList.length == 0 ? 0 : this.goodsDetailList[this.specActive].commission;
		// },
		orderStockNum() {
			return this.goodsStockList.length == 0 ? 0 : !this.goodsStockList[this.specActive] ? 0 : this.goodsStockList[this.specActive].stockNum;
		},
		specInfo() {
			return this.goodsDetailList.length == 0 ? 0 : this.goodsDetailList[this.specActive].specInfo;
		},
		orderSpec() {
			return this.specNameList.length == 0 ? 0 : this.specNameList[this.specActive];
		}
	},
	data() {
		return {
			specActive: 0,
			priceMatchIdx: -1,
			stockMatchIdx: -1,
			styleActive:0,
			imgUrl:undefined
		};
	},
	methods: {
		clickImg() {
						uni.previewImage({
							urls: [this.imgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
							current: '', // 当前显示图片的http链接，默认是第一个
							success: function(res) {},
							fail: function(res) {},
							complete: function(res) {},
						})
					},
		selectSpec(goodsSpecIdx) {
			// 数组单纯赋值，vue不会触发响应式
			// this.specActive[goodsSpecIdx] = scopeIdx;
			// console.log("specActive", this.specActive)
			// 使用this.$set方法赋值数组，主动触发vue响应式
			this.specActive = goodsSpecIdx;
		},
		selectStyle(styleIdx) {
			// 数组单纯赋值，vue不会触发响应式
			// this.specActive[goodsSpecIdx] = scopeIdx;
			// console.log("specActive", this.specActive)
			// 使用this.$set方法赋值数组，主动触发vue响应式
			
			this.imgUrl = this.styleList[styleIdx].imgUrl;
			this.styleActive = styleIdx;
		},
		async addCart() {
			if (this.orderStockNum <= 0) {
				uni.showToast({
					title: '线下库存仅剩' + 0,
					icon: 'none',
					duration: 2000
				});
				this.$store.dispatch('goods/handleGoodsPopupShow', false);
				this.$refs.childCounter.purchaseNum = 1;
				return;
			}
			// 设置购物车商品
			const goodsStock = (await checkCart([this.specInfo], [this.popupGoods.id])).data[0];
			if (this.$refs.childCounter.purchaseNum > goodsStock.stockNum) {
				uni.showToast({
					title: '线下库存仅剩' + goodsStock.stockNum,
					icon: 'none',
					duration: 2000
				});
			} else {
				const { id, name, thumbnail } = this.popupGoods;
				let goods = {
					id,
					name,
					thumbnail,
					spec: this.orderSpec,
					price: this.orderPrice,
					num: this.$refs.childCounter.purchaseNum,
					specInfo: this.specInfo,
					// commission: this.commission,
					selected: true,
					isEmpty: false,
					isOffShelf: false
				};
				this.$store.dispatch('cart/addCart', goods);
			}

			this.$store.dispatch('goods/handleGoodsPopupShow', false);
			this.$refs.childCounter.purchaseNum = 1;
		},
		gotoCart() {
			uni.switchTab({
				url: '/pages/shopping_cart/shopping_cart'
			});
		},
		async takeOrder() {
			if (this.orderStockNum <= 0) {
				uni.showToast({
					title: '线下库存仅剩' + 0,
					icon: 'none',
					duration: 2000
				});
				this.$store.dispatch('goods/handleGoodsPopupShow', false);
				this.$refs.childCounter.purchaseNum = 1;
				return;
			}
			const goodsStock = (await checkCart([this.specInfo], [this.popupGoods.id])).data[0];
			if (this.$refs.childCounter.purchaseNum > goodsStock.stockNum) {
				uni.showToast({
					title: '线下库存仅剩' + goodsStock.stockNum,
					icon: 'none',
					duration: 2000
				});
			} else {
				let goodsList = [
					{
						id: this.popupGoods.id,
						thumbnail: this.imgUrl,
						name: this.popupGoods.name,
						price: this.orderPrice,
						spec: this.orderSpec,
						specInfo: this.specInfo,
						num: this.$refs.childCounter.purchaseNum
						// commission: this.commission
					}
				];
				let URLcoursePay = encodeURIComponent(JSON.stringify(goodsList))
				uni.navigateTo({
					url: `/pages/order/confirm_order?goodsList=${URLcoursePay}`
				});
			}
			this.$store.dispatch('goods/handleGoodsPopupShow', false);
			this.$refs.childCounter.purchaseNum = 1;
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.container {
	padding: 40rpx;
	background-color: #fff;
}

.goods-content {
	display: flex;
	flex-direction: row;

	.goods-image {
		width: 200rpx;
		height: 200rpx;
	}

	.goods-info {
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 8rpx;

		.order-price {
			color: @theme-color;
			font-size: 25rpx;
			font-weight: bold;
		}

		.order-spec,
		.order-stock-num {
			color: #a69999;
			font-size: 28rpx;
		}
	}
}

.goods-spec .spec-list {
	display: flex;
	flex-direction: row;
	padding-top: 20rpx;
	flex-wrap: wrap;
	gap: 20rpx;

	.spec-item {
		margin: 0;
		font-size: 24rpx;
	}

	.spec-selected {
		background-color: #ff9600;
		color: #fff;
	}
}

.purchase-num {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 40rpx 0 40rpx 0;
	font-size: 30rpx;
}

.purchase-tool {
	display: flex;
	flex-direction: row;
	height: 80rpx;

	.common {
		flex: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;

		&.add-cart {
			background-color: #ffaa00;
			border-top-left-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
		}

		&.buy {
			background-color: #eb4450;
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
		}
	}
}

/deep/ .vue-ref {
	padding-bottom: 0;
}
</style>
